<template>
  <div class="all-content">
    <BreadList modelName="任务管理" :breadList="breadList"></BreadList>
    <div class="manage-content"
      v-loading="listLoading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)">
      <div class="search-content">
        <el-input 
          class="search-input" 
          v-model="searchParams" 
          clearable 
          placeholder="请输入关键词搜索"
          maxlength="50"
          @keyup.enter.native="getTableList(1, true)"
          >
          <i
            class="el-icon-search el-input__icon"
            slot="suffix">
          </i>
        </el-input>
        <el-button class="search-btn" type="primary" @click="getTableList(1, true)">搜索</el-button>
        <el-button class="search-btn" type="primary" @click="download">下载</el-button>
      </div>
      <div class="table-content">
        <div class="list" v-show="tableData.length > 0">
          <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%;height: 100%"
            height="100%">
            <el-table-column
              label="序号"
              type="index"
              width="68">
              <template slot-scope="scope">
                <span>{{(tablePageData.currentPage - 1) * tablePageData.pageSize + scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="监督对象">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.supervisionObject" placement="top"> -->
                  <span class="desc-style" v-html="scope.row.supervisionObject"></span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              label="监督对象名称">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.supervisionObjectName" placement="top"> -->
                  <span v-html="scope.row.supervisionObjectName"></span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              label="监督点">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.supervisionPointName" placement="top"> -->
                  <span class="desc-style" v-html="scope.row.supervisionPointName"></span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              label="监督点中文说明">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.supervisionDesc" placement="top"> -->
                  <span class="desc-style" v-html="scope.row.supervisionPointContent"></span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              label="监督点列表"
              width="145">
              <template slot-scope="scope">
                <span 
                  :class="['operate-item']"
                  @click="checkSupervise(scope.row)">
                  <span class="icon icon-look"></span>
                  查看
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="weight"
              label="权重"
              :formatter="weightFormat"
              width="145">
            </el-table-column>
            <el-table-column
              label="操作"
              width="145">
              <template slot-scope="scope">
                <span 
                  :class="['operate-item']" @click="detailShow(scope.row)">
                  <span class="icon icon-detail"></span>
                  详情
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-box" v-show="tableData.length > 0">
          <el-pagination
            class="table-page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tablePageData.currentPage"
            :page-sizes="tablePageData.pageSizes"
            :page-size="tablePageData.pageSize"
            background
            layout="total, sizes, slot, prev, pager, next"
            :total="tablePageData.total">
            <span class="page-item first" @click="handleCurrentChange(1)">首页</span>
          </el-pagination>
          <el-pagination
            class="table-page"
            @current-change="handleCurrentChange"
            :current-page="tablePageData.currentPage"
            :page-sizes="tablePageData.pageSizes"
            :page-size="tablePageData.pageSize"
            background
            layout="slot"
            :total="tablePageData.total">
            <span class="page-item" @click="handleCurrentChange(Math.ceil(tablePageData.total/tablePageData.pageSize))">末页</span>
            <span class="page-jumper">跳至<el-input class="page-num" v-model="tablePageData.inputNum" @input.native="tablePageData.inputNum = JSON.stringify(tablePageData.inputNum).replace(/[^0-9]/g,'')" @blur="handleCurrentChange(tablePageData.inputNum)" @keyup.enter.native="handleCurrentChange(tablePageData.inputNum)"></el-input>页</span>
          </el-pagination>
        </div>
        <Empty v-show="tableData.length === 0" imgHeight="42%" />
      </div>
      <el-dialog
        title="监督点查看"
        v-if="checkModelShow"
        :visible.sync="checkModelShow"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        width="1008px">
          <SupervisionPointList 
            ref="supervisionPointList" 
            :id="activeClue" 
            :taskLogId="taskLogId"
            :activeExportName="activeExportName"
            :supervisionPointId="supervisionPointId"
            @modelClose="checkModelShow = false"
            @canDownLoad="data => canDownLoad = data"></SupervisionPointList>
          <span slot="footer" class="dialog-footer">
            <el-button :disabled="!canDownLoad" type="primary" @click="superviseDown">下载</el-button>
            <el-button @click="checkModelShow = false">关闭</el-button>
          </span>
      </el-dialog>
      <el-dialog
        title="详情"
        :visible.sync="detailModelShow"
        v-if="detailModelShow"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        width="600px"
        custom-class="detail-dialog"
        >
          <DetailInfo 
            ref="detailInfo" 
            :id="activeClue" 
            :activeExportName="activeExportName"
            @detailModelClose="detailModelShow = false"
            @canDownLoad="data => canDownLoad = data"></DetailInfo>
          <span slot="footer" class="dialog-footer">
            <el-button :disabled="!canDownLoad" type="primary" @click="detailsDown">下载</el-button>
            <el-button @click="detailModelShow = false">关闭</el-button>
          </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Empty from '../../components/empty';
  import SupervisionPointList from '../../components/supervisionPointList';
  import DetailInfo from '../../components/detailInfo';
  import { mapGetters } from 'vuex';
  import { TaskResource } from '../../axios/index';
  import BreadList from '../../components/breadList';
  export default {
    name: 'TaskDetails',
    components: {
      Empty,
      SupervisionPointList,
      DetailInfo,
      BreadList
    },
    data() {
      return {
        // 搜索文本
        searchParams: '',
        oldSearchParams: '',
        // 表格相关
        listLoading: false,
        tableData: [],
        tablePageData: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
          pageSizes: [10, 20, 50],
          inputNum: 1
        },
        // 监督点查看弹框
        checkModelShow: false,
        // 详情下载
        detailModelShow: false,
        // 当前选中
        activeClue: null,
        activeExportName: '',
        taskLogId: null,
        supervisionPointId: '',
        // 控制弹框的下载
        canDownLoad: true,
        // 显示高亮结果
        showHight: false,
        // 面包屑列表
        breadList: [
          {
            modelName: 'Managelist',
            name: '任务管理'
          },
          {
            modelName: 'TaskList',
            name: '任务列表'
          },
          {
            modelName: 'TaskDetails',
            name: '任务详情'
          }
        ]
      }
    },
    mounted() {
      this.getTableList();
    },
    methods: {
      // 权重格式化
      weightFormat(row) {
        switch(row.weight){
          case 1:
            return '低'
          case 2:
            return '中'
          case 3:
            return '高'
          default:
            return '未研判'
        }
      },
      // 获取列表数据
      getTableList(page, record) {
        if(page) {
          this.tablePageData.currentPage = page;
          this.tablePageData.inputNum = page;
        }
        if(record) {
          this.oldSearchParams = JSON.parse(JSON.stringify(this.searchParams));
        }
        let returnTrue = false;
        setTimeout(() => {
          if(!returnTrue) {
            this.listLoading = true;
          }
        }, 100)
        TaskResource
        .queryTaskDetailList({
          id: this.activeItem.detailId,
          keyword: this.searchParams.trim(),
          pageNo: this.tablePageData.currentPage,
          pageSize: this.tablePageData.pageSize
        })
        .then(res => {
          returnTrue = true;
          this.listLoading = false;
          if(res && res.data) {
            this.tablePageData.total = parseInt(res.data.total);
            if(res.data.records) {
              this.tableData = res.data.records.map(item => {
                if(this.oldSearchParams.length > 0) {
                  let needHight = ['supervisionObject', 'supervisionObjectName', 'supervisionPointName', 'supervisionPointContent']
                  needHight.forEach(hItem => {
                    let exp = new RegExp(this.oldSearchParams, "g");
                    item[hItem] = item[hItem].replace(exp, '<span class="hight-light">' + this.oldSearchParams + '</span>')
                  })
                }
                return item
              });
            }
          }
        })
        .catch(() => {
          returnTrue = true;
          this.listLoading = false;
        })
      },
      // 改变每页size
      handleSizeChange(val) {
        this.tablePageData.pageSize = val;
        this.searchParams = JSON.parse(JSON.stringify(this.oldSearchParams));
        this.getTableList(1)
      },
      // 切页
      handleCurrentChange(val) {
        val = parseInt(val);
        if(!val || val <= 0) {
          val = 1;
        }
        else if(val > Math.ceil(this.tablePageData.total / this.tablePageData.pageSize)) {
          val = Math.ceil(this.tablePageData.total / this.tablePageData.pageSize);
        }
        this.tablePageData.inputNum = val;
        if(val === this.tablePageData.currentPage) {
          return
        }
        this.tablePageData.currentPage = val;
        this.searchParams = JSON.parse(JSON.stringify(this.oldSearchParams));
        this.getTableList();
      },
      // 重置
      clearSearch() {
        this.searchParams = {
          time: [],
          state: 0
        }
        this.getTableList(1, true);
      },
      // 下载
      download() {
        this.listLoading = true;
        TaskResource
        .exportTaskLogDetail({
          keyword: this.searchParams,
          id: this.activeItem.taskLogId
        })
        .then(res => {
          this.listLoading = false;
          let url = window.URL.createObjectURL(res);
          let a = document.createElement('a');
          a.style.display = 'none';
          a.href = url;
          a.download = `${this.activeItem.clueName}.xlsx`;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          window.URL.revokeObjectURL(url);
        })
        .catch(() => {
          this.listLoading = false;
        })
      },
      // 查看监督点列表
      checkSupervise(item) {
        this.activeClue = item.taskId;
        this.taskLogId = item.taskLogId;
        this.supervisionPointId = item.supervisionPointId
        this.checkModelShow = true;
        this.activeExportName = item.exceptionLogic + item.supervisionPointContent;
        this.canDownLoad = true;
      },
      // 监督点列表下载
      superviseDown() {
        // this.checkModelShow = false;
        this.$refs.supervisionPointList.downLoad();
      },
      // 查看详情
      detailShow(item) {
        this.activeClue = item.id;
        this.detailModelShow = true;
        this.activeExportName = item.supervisionObjectName + item.exceptionLogic + item.supervisionPointContent;
        this.canDownLoad = true;
      },
      // 详情下载
      detailsDown() {
        // this.detailModelShow = false;
        this.$refs.detailInfo.downLoad();
      }
    },
    computed: {
      ...mapGetters({
        activeItem: "getActiveItem"
      })
    }
  }
</script>

<style scoped lang="scss">
  .all-content {
    width: 100%;
    height: 100%;
  }
  .manage-content {
    width: 100%;
    height: calc(100% - 32px);
    padding: 0 24px;
    background-color: #fff;
  }
</style>
